<!DOCTYPE html>
<html>
  <head>
    <title>jQuery UI Button Icons</title>
    <link rel="stylesheet" type="text/css" href="../../styles/core.css">
    <link rel="stylesheet" type="text/css" href="../../themes/cupertino/jquery-ui-1.8.custom.css">
    <script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="../../scripts/jqia2.support.js"></script>
    <script type="text/javascript">
      var icons = [
        'ui-icon-carat-1-n',
        'ui-icon-carat-1-ne',
        'ui-icon-carat-1-e',
        'ui-icon-carat-1-se',
        'ui-icon-carat-1-s',
        'ui-icon-carat-1-sw',
        'ui-icon-carat-1-w',
        'ui-icon-carat-1-nw',
        'ui-icon-carat-2-n-s',
        'ui-icon-carat-2-e-w',
        'ui-icon-triangle-1-n',
        'ui-icon-triangle-1-ne',
        'ui-icon-triangle-1-e',
        'ui-icon-triangle-1-se',
        'ui-icon-triangle-1-s',
        'ui-icon-triangle-1-sw',
        'ui-icon-triangle-1-w',
        'ui-icon-triangle-1-nw',
        'ui-icon-triangle-2-n-s',
        'ui-icon-triangle-2-e-w',
        'ui-icon-arrow-1-n',
        'ui-icon-arrow-1-ne',
        'ui-icon-arrow-1-e',
        'ui-icon-arrow-1-se',
        'ui-icon-arrow-1-s',
        'ui-icon-arrow-1-sw',
        'ui-icon-arrow-1-w',
        'ui-icon-arrow-1-nw',
        'ui-icon-arrow-2-n-s',
        'ui-icon-arrow-2-ne-sw',
        'ui-icon-arrow-2-e-w',
        'ui-icon-arrow-2-se-nw',
        'ui-icon-arrowstop-1-n',
        'ui-icon-arrowstop-1-e',
        'ui-icon-arrowstop-1-s',
        'ui-icon-arrowstop-1-w',
        'ui-icon-arrowthick-1-n',
        'ui-icon-arrowthick-1-ne',
        'ui-icon-arrowthick-1-e',
        'ui-icon-arrowthick-1-se',
        'ui-icon-arrowthick-1-s',
        'ui-icon-arrowthick-1-sw',
        'ui-icon-arrowthick-1-w',
        'ui-icon-arrowthick-1-nw',
        'ui-icon-arrowthick-2-n-s',
        'ui-icon-arrowthick-2-ne-sw',
        'ui-icon-arrowthick-2-e-w',
        'ui-icon-arrowthick-2-se-nw',
        'ui-icon-arrowthickstop-1-n',
        'ui-icon-arrowthickstop-1-e',
        'ui-icon-arrowthickstop-1-s',
        'ui-icon-arrowthickstop-1-w',
        'ui-icon-arrowreturnthick-1-w',
        'ui-icon-arrowreturnthick-1-n',
        'ui-icon-arrowreturnthick-1-e',
        'ui-icon-arrowreturnthick-1-s',
        'ui-icon-arrowreturn-1-w',
        'ui-icon-arrowreturn-1-n',
        'ui-icon-arrowreturn-1-e',
        'ui-icon-arrowreturn-1-s',
        'ui-icon-arrowrefresh-1-w',
        'ui-icon-arrowrefresh-1-n',
        'ui-icon-arrowrefresh-1-e',
        'ui-icon-arrowrefresh-1-s',
        'ui-icon-arrow-4',
        'ui-icon-arrow-4-diag',
        'ui-icon-extlink',
        'ui-icon-newwin',
        'ui-icon-refresh',
        'ui-icon-shuffle',
        'ui-icon-transfer-e-w',
        'ui-icon-transferthick-e-w',
        'ui-icon-folder-collapsed',
        'ui-icon-folder-open',
        'ui-icon-document',
        'ui-icon-document-b',
        'ui-icon-note',
        'ui-icon-mail-closed',
        'ui-icon-mail-open',
        'ui-icon-suitcase',
        'ui-icon-comment',
        'ui-icon-person',
        'ui-icon-print',
        'ui-icon-trash',
        'ui-icon-locked',
        'ui-icon-unlocked',
        'ui-icon-bookmark',
        'ui-icon-tag',
        'ui-icon-home',
        'ui-icon-flag',
        'ui-icon-calendar',
        'ui-icon-cart',
        'ui-icon-pencil',
        'ui-icon-clock',
        'ui-icon-disk',
        'ui-icon-calculator',
        'ui-icon-zoomin',
        'ui-icon-zoomout',
        'ui-icon-search',
        'ui-icon-wrench',
        'ui-icon-gear',
        'ui-icon-heart',
        'ui-icon-star',
        'ui-icon-link',
        'ui-icon-cancel',
        'ui-icon-plus',
        'ui-icon-plusthick',
        'ui-icon-minus',
        'ui-icon-minusthick',
        'ui-icon-close',
        'ui-icon-closethick',
        'ui-icon-key',
        'ui-icon-lightbulb',
        'ui-icon-scissors',
        'ui-icon-clipboard',
        'ui-icon-copy',
        'ui-icon-contact',
        'ui-icon-image',
        'ui-icon-video',
        'ui-icon-script',
        'ui-icon-alert',
        'ui-icon-info',
        'ui-icon-notice',
        'ui-icon-help',
        'ui-icon-check',
        'ui-icon-bullet',
        'ui-icon-radio-off',
        'ui-icon-radio-on',
        'ui-icon-pin-w',
        'ui-icon-pin-s',
        'ui-icon-play',
        'ui-icon-pause',
        'ui-icon-seek-next',
        'ui-icon-seek-prev',
        'ui-icon-seek-end',
        'ui-icon-seek-start',
        'ui-icon-seek-first',
        'ui-icon-stop',
        'ui-icon-eject',
        'ui-icon-volume-off',
        'ui-icon-volume-on',
        'ui-icon-power',
        'ui-icon-signal-diag',
        'ui-icon-signal',
        'ui-icon-battery-0',
        'ui-icon-battery-1',
        'ui-icon-battery-2',
        'ui-icon-battery-3',
        'ui-icon-circle-plus',
        'ui-icon-circle-minus',
        'ui-icon-circle-close',
        'ui-icon-circle-triangle-e',
        'ui-icon-circle-triangle-s',
        'ui-icon-circle-triangle-w',
        'ui-icon-circle-triangle-n',
        'ui-icon-circle-arrow-e',
        'ui-icon-circle-arrow-s',
        'ui-icon-circle-arrow-w',
        'ui-icon-circle-arrow-n',
        'ui-icon-circle-zoomin',
        'ui-icon-circle-zoomout',
        'ui-icon-circle-check',
        'ui-icon-circlesmall-plus',
        'ui-icon-circlesmall-minus',
        'ui-icon-circlesmall-close',
        'ui-icon-squaresmall-plus',
        'ui-icon-squaresmall-minus',
        'ui-icon-squaresmall-close',
        'ui-icon-grip-dotted-vertical',
        'ui-icon-grip-dotted-horizontal',
        'ui-icon-grip-solid-vertical',
        'ui-icon-grip-solid-horizontal',
        'ui-icon-gripsmall-diagonal-se',
        'ui-icon-grip-diagonal-se'
      ];
      $(function(){

        var cell;

        $.each(icons,function(n){
          var iconName = this;
          var cellCount = icons.length / 4;
          if (n % cellCount<1) cell = $('<td>').appendTo('tr')[0];
          $('<button>')
            .html(''+iconName)
            .appendTo(cell);
        });

        $('button').each(function(){
          $(this).button({
            icons: { primary: $(this).text() }
          });
        });

      });

    </script>

    <style>
      button {
        width: 244px;
        margin-bottom: 3px;
      }
      td {
        width: 256px;
        vertical-align: top;
      }
      .ui-button-text {
        font-size: 0.8em;
      }
    </style>
  </head>

  <body>

    <h1>jQuery UI Button Icons</h1>

    <table id="iconTable" border="0" cellspacing="0" cellpadding="0">
      <tr></tr>
    </table>

  </body>
</html>





